<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search">
			<u--input @tap="searchp" placeholder="寻找更多优质商品" border="surround" v-model="value" @change="change" prefixIcon="search"
				prefixIconStyle="font-size: 33px;color: #909399"></u--input>
		</view>
		<!-- 轮播图 -->
		<view class="lbt" >
			<u-swiper keyName="image" circular showTitle height="340rpx" style="top: 0;" :list="list5"
				@change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<u-gap bgColor="transparent" height="15"></u-gap>
		</view>
		<!-- 宫格 -->
		<view class="gg">
			<u-grid :border="false" @click="click" col="4">
				<u-grid-item v-for="(ListItem,ListIndex) in List" :key="ListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="ListItem.name" :size="38"></u-icon>
					<text class="grid-text">{{ListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<!-- 倒计时 -->
		<view class="djs">
			<!-- 倒计时——限时抢购 -->
			<view class="xsqg">
				<text class="xsqg" style="font-weight: bold;">限时抢购</text>
			</view>
			<view class="sj">
				<!-- 倒计时——截止时间 -->
				<view class="jzsj">
					<text class="jzsj" style="color:#606266; font-size: 25rpx;">截止时间</text>
				</view>
				<view class="hsdjs">
					<u-count-down :time="60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
			</view>
		</view>
		<!-- 卡片轮播 -->
		<view class="kplb">
			<u-swiper height="185rpx" imgMode="aspectFit" :list="list3" previousMargin="0" nextMargin="150"
				easingFunction="linear" :autoplay="false" radius="5" bgColor="#f5f5f5"></u-swiper>
		</view>
		<!-- 优品选购 -->
		<view class="ypxg">
			<view class="xg">
				<text style="font-weight: bold;">优品选购</text>
			</view>
			<view class="sp1" style="display: flex;flex-wrap: wrap;margin-top:40rpx ;">
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 520rpx;background-color: #ffffff; margin-left: 5rpx;">
					<view style="height: 330rpx;width: 330rpx;">
						<img :src="imageUrl" alt="" style="width: 330rpx; height: 330rpx;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>正版动漫周边桌面摆件猫咪手办橘猫手办</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>手办</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥65</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 520rpx;background-color: #ffffff; margin-left: 35rpx;">
					<view style="height: 330rpx;width: 330rpx;">
						<img :src="imageUrl" alt="" style="width: 330rpx; height: 330rpx;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>正版动漫周边桌面摆件猫咪手办橘猫手办</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>手办</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0; font-size: 28rpx;color: red;">
						<span>￥65</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 520rpx;background-color: #ffffff; margin:40rpx 5rpx 0 0;">
					<view style="height: 330rpx;width: 330rpx;">
						<img :src="imageUrl" alt="" style="width: 330rpx; height: 330rpx;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx; font-size: 26rpx;line-height: 44rpx;">
						<span>正版动漫周边桌面摆件猫咪手办橘猫手办</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>手办</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥65</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 600rpx;background-color: #ffffff; margin:40rpx 5rpx 0 35rpx;">
					<view style=" height: 410rpx;width: 330rpx;">
						<img :src="imageUrl2" alt=""
							style="border-radius: 20rpx 20rpx 0 0; width: 100%; height: 100%;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>得力· 纯天然9.9原木铅笔-全店满88全国包邮</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx;font-size: 20rpx; color: #999999;">
						<span>办公用品</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥9.90</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 600rpx;background-color: #ffffff; margin:-40rpx 5rpx 0 0;">
					<view style=" height: 410rpx;width: 330rpx;">
						<img :src="imageUrl2" alt=""
							style="border-radius: 20rpx 20rpx 0 0; width: 100%; height: 100%;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>得力· 纯天然9.9原木铅笔-全店满88全国包邮</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>办公用品</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥9.90</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 600rpx;background-color: #ffffff; margin:40rpx 5rpx 0 35rpx;">
					<view style=" height: 410rpx;width: 330rpx;">
						<img :src="imageUrl2" alt=""
							style="border-radius: 20rpx 20rpx 0 0; width: 100%; height: 100%;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>得力· 纯天然9.9原木铅笔-全店满88全国包邮</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>办公用品</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥9.90</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 600rpx;background-color: #ffffff; margin:-40rpx 5rpx 0 0;">
					<view style=" height: 410rpx;width: 330rpx;">
						<img :src="imageUrl2" alt=""
							style="border-radius: 20rpx 20rpx 0 0; width: 100%; height: 100%;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx; font-size: 26rpx;line-height: 44rpx;">
						<span>得力· 纯天然9.9原木铅笔-全店满88全国包邮</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx;color: #999999;">
						<span >办公用品</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx ;; color: red;">
						<span>￥9.90</span>
					</view>
				</view>
				<view
					@tap="detail" style="box-shadow: 0 0 8px #e3e3e3; border-radius: 20rpx; width: 330rpx;height: 520rpx;background-color: #ffffff; margin:40rpx 5rpx 0 35rpx;">
					<view style="height: 330rpx;width: 330rpx;">
						<img :src="imageUrl" alt="" style="width: 330rpx; height: 330rpx;" />
					</view>
					<view style="margin: 15rpx 9rpx 0 10rpx;font-size: 26rpx; line-height: 44rpx;">
						<span>正版动漫周边桌面摆件猫咪手办橘猫手办</span>
					</view>
					<view style="margin: 0 9rpx 0 10rpx; font-size: 20rpx; color: #999999;">
						<span>手办</span>
					</view>
					<view style="margin: 8rpx 9rpx 0 0;font-size: 28rpx; color: red;">
						<span>￥65</span>
					</view>
				</view>
			</view>
			<view class="wrap" style="height: 50%;">
				<u-loadmore color="#3366ff" iconColor="#a8d5ff" loadingIcon="semicircle" :status="status"
					:loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</view>
		</view>
		<!-- 底部 -->
		<view>
			<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true"
				:safeAreaInsetBottom="true">
				<u-tabbar-item @tap="index" text="首页" icon="home" style="margin-left: 20rpx;"></u-tabbar-item>
				<u-tabbar-item text="购物车" icon="shopping-cart"></u-tabbar-item>
				<u-tabbar-item text="我的订单" icon="car"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value6: 0,
				status: 'loading',
				loadingText: '努力中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				timeData: {},
				list5: [{
					image: this.$minioServerUrl + '/static/fenxiao/u105.png',
					title: '又到了这个心花怒放的季节！',
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u106.png'
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u107.png'
				}, {
					image: this.$minioServerUrl + '/static/fenxiao/u108.png'
				}],
				current: 0,

				List: [{
						name: this.$minioServerUrl + '/static/fenxiao/u50.png',
						title: '精品推荐'
					},
					{
						name: this.$minioServerUrl + '/static/fenxiao/u51.png',
						title: '个性订阅'
					},
					{
						name: this.$minioServerUrl + '/static/fenxiao/u52.png',
						title: '本周特惠'
					}, {
						name: this.$minioServerUrl + '/static/fenxiao/u53.png',
						title: '新品上市'
					}
				],
				list3: [
					this.$minioServerUrl + '/static/fenxiao/u275.png',
					this.$minioServerUrl + '/static/fenxiao/u279.png',
					this.$minioServerUrl + '/static/fenxiao/u287.png',
				],
				imageUrl: this.$minioServerUrl + '/static/fenxiao/u820.png',
				imageUrl2: this.$minioServerUrl + '/static/fenxiao/u832.png',
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			index() {
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			searchp() {
				uni.navigateTo({
					url: '/pages/search/search-p'
				})
			},
			detail() {
				uni.navigateTo({
					url: '/pages/item_detail/detail'
				})
			},
			    handleChange(e) {
			      this.current = e.current;
			      console.log('Current index:', e.current);  // 添加这行调试输出
			    }
		}
	}
</script>

<style scoped lang="scss">
	.container {
		margin: 25rpx;

		.search {
			margin: 0 auto;
			width: 680rpx;
		}
	}

	.lbt {
		margin-top: 20rpx;

		.indicator {
			position: absolute;
			bottom: 0;
			left: 200rpx;
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #0055ff;
				}
			}
		}
	}

	.gg {
		.grid-text {
			font-size: 14px;
			color: #000000;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}

	.djs {
		margin-top: 20rpx;
		height: 60rpx;
		display: flex;

		.sj {
			display: flex;
			padding: 6rpx 0 0 20rpx;

			.jzsj {
				margin-right: 4rpx;
				line-height: 59rpx;
			}

			.hsdjs {
				.time {
					@include flex;
					align-items: center;

					&__custom {
						margin-top: 5px;
						width: 22px;
						height: 22px;
						background-color: #f5f5f5;
						border-radius: 4px;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: red;
							font-size: 12px;
							text-align: center;
						}
					}

					&__doc {
						color: red;
						padding: 0px 4px;
					}

					&__item {
						color: #606266;
						font-size: 15px;
						margin-right: 4px;
					}
				}
			}
		}
	}

	.kplb {
		margin-top: 20rpx;
	}

	.ypxg {
		.xg {
			margin-top: 40rpx;
		}
	}
</style>